<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="Metro, a sleek, intuitive, and powerful framework for faster and easier web development for Windows Metro Style.">
    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, metro, front-end, frontend, web development">
    <meta name="author" content="Sergey Pimenov and Metro UI CSS contributors">

    <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
    <title>Hotkeys :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style</title>

    <link href="css/metro.css" rel="stylesheet">
    <link href="css/metro-icons.css" rel="stylesheet">
    <link href="css/metro-responsive.css" rel="stylesheet">
    <link href="css/metro-schemes.css" rel="stylesheet">

    <link href="css/docs.css" rel="stylesheet">

    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/metro.js"></script>
    <script src="js/docs.js"></script>
    <script src="js/prettify/run_prettify.js"></script>
    <script src="js/ga.js"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

</head>
<body>
    <div class="container page-content">
        <h1><a href="index.html" class="nav-button transform"><span></span></a>&nbsp;Hotkeys</h1>

        @@adsense

        <div class="margin20 no-margin-left no-margin-right sub-header text-light">
            Metro UI CSS provides way to bind hotkeys to any control elements.
        </div>

        <div class="example" data-text="example">
            <h5>Menu</h5>
            <ul class="v-menu block-shadow-impact min-size-required">
                <li class="menu-title">First Title</li>
                <li><a data-hotkey="Ctrl+F1" href="#" onclick="alert('Home clicked')"><span class="mif-home icon"></span> Home</a></li>
                <li class="divider"></li>
                <li class="menu-title">Second Title</li>
                <li><a data-hotkey="Alt+1" href="#" onclick="alert('Profile clicked')"><span class="mif-user icon"></span> Profile</a></li>
                <li><a data-hotkey="Ctrl+F3" href="http://calendar.google.com"><span class="mif-calendar icon"></span> Calendar</a></li>
                <li><a href="#"><span class="mif-image icon"></span> Photo</a></li>
                <li class="divider"></li>
                <li class="menu-title">Third Title</li>
                <li>
                    <a data-hotkey="Ctrl+F2" href="#" class="dropdown-toggle"><span class="mif-my-location icon"></span> Location</a>
                    <ul class="d-menu" data-role="dropdown">
                        <li class="menu-title">Title for dropdown</li>
                        <li><a href="#">Коллеги</a></li>
                        <li><a href="#">Интересно</a></li>
                        <li>
                            <div class="item-block text-center">
                                <button class="square-button"><img class="icon" src="images/round.png"></button>
                                <button class="square-button"><img class="icon" src="images/location.png"></button>
                                <button class="square-button"><img class="icon" src="images/group.png"></button>
                            </div>
                        </li>
                        <li>
                            <a href="#" class="dropdown-toggle">Еще...</a>
                            <ul  class="d-menu" data-role="dropdown">
                                <li><a href="#">Коллеги</a></li>
                                <li><a href="#">Интересно</a></li>
                                <li>
                                    <div class="item-block text-center bg-grayLighter">
                                        <button class="round-button"><img class="icon" src="images/round.png"></button>
                                        <button class="round-button"><img class="icon" src="images/location.png"></button>
                                        <button class="round-button"><img class="icon" src="images/group.png"></button>
                                        <button class="round-button"><img class="icon" src="images/power.png"></button>
                                    </div>
                                </li>
                                <li class="divider"></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#"><span class="mif-bubbles icon"></span> Community</a></li>
            </ul>
        </div>

        <p>
            To bind hotkey you must add <span class="tag">data-hotkey</span> attribute to element with hotkey value.
        </p>

        <div class="example" data-text="code">
            <pre class="prettyprint linenums"><code>
                &lt;ul class="v-menu"&gt;
                    &lt;li&gt;
                        &lt;a data-hotkey="Ctrl+F1" href="#" onclick="alert('Home clicked')"&gt;
                            &lt;span class="mif-home icon"&gt;&lt;/span&gt; Home
                        &lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;a data-hotkey="Ctrl+F2" href="#" class="dropdown-toggle"&gt;
                            &lt;span class="mif-my-location icon"&gt;&lt;/span&gt; Location
                        &lt;/a&gt;
                        &lt;ul class="d-menu" data-role="dropdown"&gt;
                            ...
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            </code></pre>
        </div>

        <h5>Buttons example</h5>
        <div class="example" data-text="example" style="vertical-align: middle">
            <div class="dropdown-button">
                <button data-hotkey="alt+4" class="button dropdown-toggle">Press Alt+4</button>
                <ul class="split-content d-menu" data-role="dropdown">
                    <li><a href="#">Reply</a></li>
                    <li><a href="#">Reply All</a></li>
                    <li><a href="#">Forward</a></li>
                </ul>
            </div>

            <div class="split-button">
                <button class="button">Press Alt+6</button>
                <button class="split dropdown-toggle" data-hotkey="alt+6"></button>
                <ul class="split-content d-menu" data-role="dropdown">
                    <li><a href="#">Reply</a></li>
                    <li><a href="#">Reply All</a></li>
                    <li><a href="#">Forward</a></li>
                </ul>
            </div>

            <button class="button" data-hotkey="alt+7" onclick="alert('Button clicked')">Press Alt+7</button>

            <button class="shortcut-button" data-hotkey="alt+5" onclick="alert('Shortcut clicked')">
                <span class="icon mif-rocket"></span>
                <span class="title">Rocket</span>
            </button>
        </div>

        <div class="example" data-text="code">
            <pre class="prettyprint linenums"><code>
                &lt;div class="dropdown-button"&gt;
                    &lt;button data-hotkey="alt+4" class="button dropdown-toggle"&gt;Press Alt+4&lt;/button&gt;
                    &lt;ul class="split-content d-menu" data-role="dropdown"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Reply&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Reply All&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Forward&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;div class="split-button"&gt;
                    &lt;button class="button"&gt;Press Alt+6&lt;/button&gt;
                    &lt;button class="split dropdown-toggle" data-hotkey="alt+6"&gt;&lt;/button&gt;
                    &lt;ul class="split-content d-menu" data-role="dropdown"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Reply&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Reply All&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Forward&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;

                &lt;button class="button" data-hotkey="alt+7" onclick="alert('Button clicked')"&gt;Press Alt+7&lt;/button&gt;

                &lt;button class="shortcut-button" data-hotkey="alt+5" onclick="alert('Shortcut clicked')"&gt;
                    &lt;span class="icon mif-rocket"&gt;&lt;/span&gt;
                    &lt;span class="title"&gt;Rocket&lt;/span&gt;
                &lt;/button&gt;
            </code></pre>
        </div>

    </div>

    @@hit

</body>
</html>